<template>
  <div class="alarm-message">
    <span class="alarm-icon">&#9888;</span>
    <span class="warning">提示信息</span>
    <div class="alarm-marquee">
      <span class="marquee-text">{{ message }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
  defineProps<{
    message: string;
  }>();
</script>

<style scoped>
  .alarm-message {
    --bg: #3e1b3c;
    --border: #ff4d4f;
    --text: #fff;
    --warning: red;

    height: 3vh;
    /* width: 100%; */
    flex: 1;
    max-width: 55rem;
    display: flex;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text);
    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.08);
    padding: 0 5px;
  }

  .alarm-icon {
    font-size: 20px;
    color: var(--border);
  }

  .warning {
    color: var(--warning);
    font-size: 16px;
    width: 5rem;
    margin-left: 5px;
  }

  .alarm-marquee {
    overflow: hidden;
    flex: 1;
    position: relative;
    height: 100%;
  }

  .marquee-text {
    position: absolute;
    white-space: nowrap;
    font-size: 16px;
    animation: marquee 32s linear infinite;
    cursor: pointer;
    top: 50%;
    transform: translateY(-50%);
  }

  .marquee-text:hover {
    animation-play-state: paused;
    font-weight: 500;
  }

  @keyframes marquee {
    0% {
      left: 100%;
      transform: translate(0, -50%);
    }
    100% {
      left: 0;
      transform: translate(-100%, -50%);
    }
  }
</style>
